<template>
	<div class="card-warpper">
		<div class="card-main">
			<div class="card-head">
				<div class="head-icon">
					<rk-icon v-if="headIcon" :icon-style="{ width: iconWidth, height: iconHeight }" :icon-class="headIcon" />
				</div>
				<div class="head-name">{{ headName }}</div>
			</div>
			<div class="card-body card-row">
				<div class="card-col card-item" v-for="item in infoList" :key="item">
					<div class="card-item-body">
						<div class="pending-line"></div>
						<div class="item-body-main">
							<div class="term-title">{{ item.label }}</div>
							<div class="term-count">{{ item.value }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	// 选项内容
	infoList: { type: Array, default: () => [] },
	// 面板背景颜色
	bgColor: { type: [String, Array] },
	// 面板头部名称
	headName: { type: String },
	// 面板头部图标
	headIcon: { type: String },
	// 是否自动渲染块的颜色
	autoColor: { type: Boolean, default: true },
	// 图标的宽度
	iconWidth: { type: String, default: '1.5em' },
	// 图标的高度
	iconHeight: { type: String, default: '1.5em' },
	// 面板自定义样式
	cardItemStyle: { type: [Object] },
});

const emits = defineEmits(['countClick']);
const emitCountClick = (info) => {
	emits('countClick', info);
};
</script>

<style lang="scss" scoped>
.card-row {
	display: flex;
	margin-left: -5px;
	margin-right: -5px;
}
.card-col {
	padding: 0 5px;
}

.card-warpper {
	padding: 0 5px;
	flex: 1;
	.card-head {
		display: flex;
		margin-bottom: 10px;
		.head-icon {
			display: flex;
			margin-right: 8px;
		}
		.head-name {
			font-size: 16px;
			font-weight: 600;
		}
	}
}
// .card-wrapper-left {
//   width: calc(100% / 5 * 3)
// }
// .card-wrapper-right {
//   width: calc(100% / 5 * 2)
// }
.card-main {
	padding: 10px;
	background: #fff;
}
.card-item {
	flex: 1;
	&-head {
		margin-bottom: 0;
	}
	&-body {
		// height: 50px;
		display: flex;
		// background: linear-gradient(to right,rgba(240,2,20,0.098), var(--el-color-white)) no-repeat;
		background: linear-gradient(to right, var(--el-color-primary-light-9), #fbfbfb) no-repeat;
		padding: 15px;
		.pending-line {
			background: var(--el-color-primary);
			width: 10px;
			height: 50px;
			margin-right: 20px;
			border-radius: 10px;
		}
	}
	.item-body-main {
		.term-title {
			font-size: 15px;
			font-weight: 700;
			line-height: 28px;
			margin-bottom: 5px;
		}
		.term-count {
			font-size: 18px;
			color: var(--el-color-primary);
			font-weight: 700;
			cursor: pointer;
			&:hover {
				text-decoration: underline;
			}
		}
	}
}
</style>
